<template>
    <div class="container">
        <div :id="id" class="chart_line" :data="data" />
    </div>
</template>

<script>
export default {
    name: 'Chart',
    props: ['id', 'data'], // id必须找到dom的节点，data就是option图标核心数据
    data() {
        return {
            ChartLineGraph: null
        }
    },
    watch: {
        data: {
            handler(newValue, oldvalue) {
                this.drawLineGraph(this.id, newValue)
            },
            deep: true
        }
    },
    mounted() {
        this.drawLineGraph(this.id, this.data)

    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
        if (this.ChartLineGraph) {
            this.ChartLineGraph.clear()
        }
    },
    methods: {
        drawLineGraph(id, data) {
            let _this = this
            let myChart = document.getElementById(id)
            this.ChartLineGraph = this.$echarts.init(myChart) // 初始化实例
            this.ChartLineGraph.setOption(data, true)// 开启重绘
            window.addEventListener('resize', function() {
                _this.ChartLineGraph.resize() // 浏览器缩放eachrts自适应
            })
        }
    }
}
</script>

<style scoped>
.container,
.chart_line {
    height: 100%;
    width: 100%;
}
</style>
